<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>路由入门案例</title>
	</head>
	<body>
		<div id="app">
			<!-- <a href="设定跳转的地址">百度</a> -->
			
			<!-- 二:定义链接
					1.router-link 被编译之后转化为a标签
					2.关键字 to    被编译之后转化为href属性
			 -->
			<router-link to="/user">用户</router-link>
			<router-link to="/dog">狗狗</router-link>
			
			<!--三: 指定路由的填充位置 未来展现组件信息 
				填充的位置被解析之后 就是一个DIV
			 -->
			<router-view></router-view>
			
		</div>
		
		<!-- 定义组件的标签体 -->
		<template id="userTem">
			<div>
				<h3>用户信息</h3>
			</div>
		</template>
		
		<template id="dogTem">
			<div>
				<h3>狗狗信息</h3>
			</div>
		</template>
		
		<!-- 1.导入路由JS    先导入vue.js  再导入路由.js 顺序问题 -->
		<script src="../js/vue.js"></script>
		<script src="../js/vue-router.js"></script>
		
		<script>
			
		/**
		 * 第四步: 准备组件,定义路由对象
		 */
			let userCom = {
				template: "#userTem"
			}
			
			let dogCom= {
				template: "#dogTem"
			}
			
			/**
			 * 定义路由对象
			 * routes:  路由的多个映射通过该属性进行定义.
			 */
			let vueRouter = new VueRouter({
				routes: [
					{path: "/",redirect: "/dog"},
					{path: "/user", component: userCom},
					{path: "/dog",  component: dogCom}
				]
			})
		
			const APP = new Vue({
				el: "#app",
				
				data: {
				},
				//实现路由的挂载
				router: vueRouter
			})
		</script>
	</body>
</html>